<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门02</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">


</style>
</head>
<body>
	
<!-- 操作dom元素：第一部分 -->
<!-- 	<div class="box"> div1</div>
	<div>div2<strong class="box">123</strong></div>
-->


<!-- 操作dom元素：第二部分 -->

<div  id="div2">

	<h2>h2</h2>
	<p>p</p>
	<h3>h3</h3>
	<em>em</em>
	<div id="div2-1"></div>
		<ul>这是ul (当前选择name=li2，所以li字体变红，而ul未变色)
			<li>li1</li>
			<li name="li2">name='li2'</li>
			<li>li3</li>
		</ul>
	</div>

</div>

<div id="div3id" class="div3class" title="div3title">div3文本</div>

<script type="text/javascript">


$(function(){//jq方法：页面加载完成再执行

//操作dom元素：第一部分

//filter 过滤，因为strong嵌入在div中，所以不生效。只有div.box生效
	// $("div").filter(".box").css("backgroundColor","orange")
//not 排除, 排除第一个.box  ，第二个div变橙色
	//$("div").not(".box").css("backgroundColor","orange")
//has  拥有，判定子节点是否拥有这个元素 (因为div2 拥有子节点.box ,所以div2背景变为橙色)
	//$("div").has(".box").css("backgroundColor","orange")


//操作dom元素：第二部分

//prev  next, 查找当前兄弟节点的上一个、下一个节点
	//$("h3").prev().css("backgroundColor","orange")//p 标签变色
	//$("h3").next().css("backgroundColor","blue")//em 标签变色
//find()  查找子节点
	//$("div").find("[name='li2']").css("color",'red')


//index(),  获取在同一父级元素上的元素下标，下标从0开始
	//alert($("#div2-1").index()) 

//attr,获取元素的属性值，使用 attr() 时直接在括号内加入属性即可
	//alert( $("#div3id").attr('id') )
	//alert( $("#div3id").attr('class') )




})





</script>


</body>
</html>